<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人作品</title>
    <style>
        body {
            background-image: url(成都东软学院1.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center 0;
            background-attachment: fixed;
            background-color: aliceblue[];
        }
        
        .b {
            width: 50px;
            height: 50px;
            margin-right: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .n {
            width: 50px;
            height: 50px;
            margin-right: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        .m {
            width: 50px;
            height: 50px;
            margin-right: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        header div img:hover {
            width: 100px;
            height: 100px;
            border: 3px solid rebeccapurple;
        }
        
        .my {
            width: 150px;
            height: 200px;
        }
        
        .my {
            width: 200px;
            height: 200px;
            /* 定义转换属性及时间 */
            transition: all 1.5s;
        }
        
        .my:hover {
            box-shadow: 0 0 10px gray;
            /* 若分开书写，根据CSS层叠性，只会作用最后一个转换效果 */
            transform: rotate(360deg);
            transform: scale(1.5);
        }
    </style>
</head>

<!--引入style.css文件-->
<link rel="stylesheet" href="style.css">



<body>

    <!--首先去建立页面版心-->
    <div class="container">
        <!--头部标签-->
        <header>
            <img class="my" src="个人介绍.png" alt="">
            <h1>个人作品</h1>
            <p>19201-19330520116-杜亚萍</p>
            <a href="#"> PS / AI </a>

            <div>
                <img class="b" src="4.png" alt="">
                <img class="n" src="12.jpg" alt="">
                <img class="m" src="14.jpg" alt="">
            </div>
        </header>

        <!--导航标签-->
        <nav>
            <a href="index.html">作品首页</a>
            <a href="myself.html">个人介绍</a>
            <a href="my.html">饮食运动</a>
            <a href="gym.html">减肥变化</a>
        </nav>

        <!--模块内容标签-->
        <section class="work">
            <div>
                <div class="o">
                    <img class="first" src="8.png" alt="">
                    <img class="first" src="9.png" alt="">
                    <img class="first" src="10.png" alt="">
                    <img class="first" src="8.png" alt="">
                </div>
                <div class="t">
                    <img class="second" src="13.jpg" alt="">
                    <img class="second" src="15.jpg" alt="">
                    <img class="second" src="16.jpg" alt="">
                    <img class="second" src="file:///C:/Users/86159/Desktop/HTML/17.jpg" alt="">
                    <img class="second" src="file:///C:/Users/86159/Desktop/HTML/188.jpg" alt="">
                    <img class="second" src="file:///C:/Users/86159/Desktop/HTML/199.jpg" alt="">
                </div>
                <div class="h">
                    <img class="third" src="file:///C:/Users/86159/Desktop/HTML/18.jpg" alt="">
                    <img class="third" src="file:///C:/Users/86159/Desktop/HTML/20.jpg" alt="">
                    <img class="third" src="file:///C:/Users/86159/Desktop/HTML/21.jpg" alt="">
                    <img class="third" src="file:///C:/Users/86159/Desktop/HTML/19.jpg" alt="">
                </div>
            </div>
        </section>
    </div>

</body>

</html>